<template>
  <view class="book-container">
    <!-- 返回按钮 -->
    <view class="backButton-container">
      <view class="backButton" @click.stop="goBack">
        <uni-icons type="left" size="30"></uni-icons>
      </view>
    </view>
    <!-- 小说信息区 -->
    <view class="info-header">
      <image class="cover-image" :src="`${BASE_URL}${bookData.coverImage}`" mode="aspectFill"></image>
      <view class="book-info">
        <text class="book-title">《{{ bookData.title }}》</text>
        <text class="book-author">作者：{{ bookData.authorName }}</text>
        <text class="book-author">题材：{{ bookData.genre }}</text>
        <text class="book-author">连载状态：{{ bookData.status }}</text>
        <view class="statistics">
          <uni-icons type="eye-filled" size="25"></uni-icons>
          <text class="stat-item">浏览人数: {{ bookData.views }}人</text>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="divider">________________________________________________</view>
    <!-- 书籍简介 -->
    <view class="description">
      <text class="description-title">简介：</text>
      <text class="description-text">{{ bookData.description }}</text>
    </view>
    <!-- 底部操作按钮 -->
    <view class="action-buttons">
        <uni-icons :type="isStarred ? 'star-filled' : 'star'" size="30" @click="toggleStar"></uni-icons>
        <text>|</text>
        <uni-icons :type="isLiked ? 'hand-up-filled' : 'hand-up'" size="30" @click="toggleLike"></uni-icons>
        <text>{{ bookData.likes }}</text>
        <button class="button read-button" @click="readBook">开始阅读</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { apiGetBookInfo, apiInsertCollection, apiDeleteCollection, apiInsertLike, apiDeleteLike } from '../../api/apis';
import { BASE_URL } from '../../utils/request';

const bookData = ref({});
const isStarred = ref(false);
const isLiked = ref(false);
let fromPage = 'index';

// 解析id和来源页面
onLoad((e) => {
  bookData.bookId = e.novelId;
  fromPage = e.fromPage || 'index'; // 默认来源为首页
  getBookData();
})

const getBookData = async () => {
  let res;
  if (bookData.bookId) res = await apiGetBookInfo({ novelId: bookData.bookId });
  bookData.value = res.data;
  isStarred.value = bookData.value.isBookmark;
  isLiked.value = bookData.value.isLike;
}

const readBook = () => {
  uni.navigateTo({
    url: '/pages/book/bookread?bookId=' + bookData.bookId + '&chapterNumber=1&isDirectoryJump=false'
  });
};

const toggleStar = async () => {
  if (isStarred.value) {
    // 取消收藏
    await apiDeleteCollection({ novelId: bookData.bookId });
  } else {
    // 添加收藏
    await apiInsertCollection({ novelId: bookData.bookId });
  }
  isStarred.value = !isStarred.value;
};

const toggleLike = async () => {
  if (isLiked.value) {
    // 取消点赞
    await apiDeleteLike({ novelId: bookData.bookId });
    bookData.value.likes--;
  } else {
    // 点赞
    await apiInsertLike({ novelId: bookData.bookId });
    bookData.value.likes++;
  }
  isLiked.value = !isLiked.value;
};

const goBack = () => {
  if (fromPage === 'index') {
    uni.switchTab({
      url: `/pages/index/index`
    });
  } else {
    uni.navigateBack();
  }
};
</script>

<style lang="scss" scoped>
.book-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}

.backButton-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.info-header {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.cover-image {
  width: 130px;
  height: 200px;
  display: block;
  border-radius: 10px;
  margin-right: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加底部阴影 */
}

.book-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-title {
  font-size: 30px;
  font-weight: bold;
  margin-top: -10px;
  font-family: "SimSun", "宋体", serif; /* 设置为宋体 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加底部阴影 */
}

.book-author {
  font-size: 20px;
  color: #666;
  margin-top: 20px;
  font-family: "SimSun", "宋体", serif; /* 设置为宋体 */
}

.statistics {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

.stat-item {
  font-size: 20px;
  margin-left: 10px;
  color: #666;
  font-family: "SimSun", "宋体", serif; /* 设置为宋体 */
}

.description {
  width: 100%;
  margin-bottom: 20px;
}

.description-title {
  font-family: "Microsoft YaHei", sans-serif; /* 设置字体为雅黑 */
  font-weight: bold; /* 设置字体加粗 */
  font-size: 24px; /* 自定义字体大小 */
  display: block; /* 确保单独一行 */
  margin-bottom: 10px; /* 可选：增加下边距 */
}

.description-text {
  font-size: 20px;
  line-height: 1.5;
  color: #333;
}

.action-buttons {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  gap: 40rpx;
}

.read-button {
  width: 350rpx;
  height: 90rpx;
  border-radius: 40rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 40px;
}
/* 分割线样式 */
.divider {
  border-bottom: 2px solid #333; /* 底部边框为粗线条 */
  margin-bottom: 10px; /* 底部外边距 */
}
</style>
